<script>
export default {
  name: 'my-welfare-tab',
  props: {
    tabList: Array,
    /* vue2 v-model数据的双向绑定 */
    value: {
      type: Number,
      default: 0,
    },
  },
  methods: {

  },
}
</script>

<template>
  <!--   tab栏   -->
  <view class="tab">
    <view
      @click="$emit('input', index)"
      class="tab-item"
      :class="{active: index === value}"
      v-for="(item, index) in tabList"
      :key="index"
    >
      {{ item }}
    </view>
  </view>
</template>

<style scoped lang="scss">
.tab {
  margin: 20rpx auto;
  width: 710rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  background-size: 100% 100%;

  .tab-item {
    /*width: 355rpx;*/
    height: 60rpx;
    line-height: 60rpx;
    padding: 0 20px;
    text-align: center;
    color: white;
    font-size: 28rpx;
    background-size: 100% 100%;
    white-space: nowrap;

    &.active {
      background: rgba(0,0,0,0.44);
      box-shadow: inset 0 0 54rpx 0 rgba(0,220,255,0.3);
      border-radius: 206rpx 206rpx 206rpx 206rpx;
      border: 1rpx solid #00DCFF;
    }
  }
}
</style>